<div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="
    app.settings.asideFolded = false; 
    app.settings.asideDock = false;
  ">
    <!-- main -->
    <div class="col">
        <!-- main header -->
        <div class="bg-light lter b-b wrapper-md">
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <h1 class="m-n font-thin h3 text-black">个人信息</h1>
                    <small class="text-muted">个人信息查看,维护</small>
                </div>
            </div>
        </div>
        <!-- / main header -->
        <div class="wrapper-md" ng-controller="userCtrl">
            <!-- toaster directive -->
            <toaster-container
                    toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
            <!-- / toaster directive -->

            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal">

                        <div class="form-group" ng-show="contains(authPoint, 'canEdit')">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">管理员查询用户</label>

                                <div class="col-lg-6">
                                    <ui-select ng-model="nowUser.selected" theme="bootstrap">
                                        <ui-select-match placeholder="搜索用户名称......">{{$select.selected.username + '<' +
                                            $select.selected.displayName + '>' }}
                                        </ui-select-match>
                                        <ui-select-choices refresh="queryUser($select.search)" refresh-dalay="0"
                                                           repeat="item in userList | filter: $select.search">
                                            <div ng-bind-html="item.username + '<' + item.displayName + '>' | highlight: $select.search"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>


                                <!--<div class="col-md-6">-->
                                <!--<input type="text" class="form-control" ng-model="queryName" placeholder="查询用户名">-->
                                <!--</div>-->
                                <div class="col-md-3" ng-show="nowUser.selected != null">
                                    <button type="button" class="btn btn-info" ng-click="queryUserInfo()"><span
                                            class="glyphicon glyphicon-search"></span>搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">用户</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" ng-model="userDetail.username" readonly>
                                </div>
                                <div class="col-md-3">
                                    <button ng-click="editUserInfo()"
                                            class="btn btn-xs"
                                            style="margin-top:5px; background-color: #2e6da4; color: white;">
                                        <span class="glyphicon glyphicon-edit"></span>修改个人信息
                                    </button>
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">显示名</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" ng-model="userDetail.displayName" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">Email</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" ng-model="userDetail.mail" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">手机</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" ng-model="userDetail.mobile" readonly>
                                </div>
                            </div>
                        </div>

                        <!--<div class="form-group">-->
                        <!--<div class="col-md-8">-->
                        <!--<label class="col-md-3 control-label">翻墙(shadowsocks)服务器端口</label>-->

                        <!--<div class="col-md-9">-->
                        <!--<input type="text" class="form-control" ng-model="userDetail.shadowsocksPort"-->
                        <!--readonly>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">密码(阿里云RAM子账户)</label>
                                <!--<div class="col-md-9">-->

                                <div class="input-group" style="padding-left: 15px; padding-right: 15px">
                                    <input type="text" class="form-control" placeholder="密码" ng-model="userDetail.vPwd"
                                           ng-readonly="!contains(authPoint, 'canEdit')">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default"
                                                ng-click="viewPwd()"><i class="fa fa-eye pull-right"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">翻墙(shadowsocks)服务器列表</label>
                                <div class="col-md-9" style="box-shadow: 0 0 5px #ddd;padding: 10px">
                                    <div class="col-md-4" ng-repeat="ss in userDetail.ssList">

                                        <input type="checkbox" ng-model="ss.checked">
                                        <b style="margin-left: 5px; color: #286090"
                                           uib-popover-html="ss.content" popover-trigger="'mouseenter'">
                                            {{ss.server}}</b>
                                        <qrcode ng-show="ss.checked" data="{{ss.qrcode}}"></qrcode>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">外部平台角色</label>
                                <div class="col-md-9" style="box-shadow:0 0 5px #ddd;padding: 10px">
                                    <div class="col-md-12" ng-repeat="ldapGroup in userDetail.ldapGroups">
                                        <div ng-if="ldapGroup.bind">
                                            <b style="color: #286090">{{ldapGroup.name}}</b>
                                            <b class="pull-right"
                                               ng-show="ldapGroup.content !=''">{{ldapGroup.content}}</b>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">服务器组</label>
                                <div class="col-md-9" style="box-shadow: 0 0 5px #ddd;padding: 10px">
                                    <div class="col-md-12" ng-repeat="groupItem in userDetail.groupDOList">
                                        <b class="pull-left" style="color: #286090">{{groupItem.name}}</b>
                                        <b class="pull-right">{{groupItem.content}}</b>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">RAM授权策略</label>
                                <div class="col-md-9" style="box-shadow: 0 0 5px #ddd;padding: 10px">
                                    <div class="col-md-12" ng-repeat="policy in userDetail.policyList">
                                        <b class="pull-left" style="color: #286090">{{policy.policyName}}</b>
                                        <b class="pull-right">{{policy.description}}</b>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group"
                             ng-if="userDetail.accessKeyList != null && userDetail.accessKeyList.length !=0">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">RAM-AK</label>
                                <div class="col-md-9" style="box-shadow: 0 0 5px #ddd;padding: 10px">
                                    <div class="col-md-12" ng-repeat="accessKey in userDetail.accessKeyList">
                                        <b class="pull-left" style="color: #286090">{{accessKey.accessKeyId}}</b>
                                        <b class="pull-right" style="color: green"
                                           ng-show="accessKey.status == 'Active'">启用</b>
                                        <b class="pull-right" style="color: red" ng-show="accessKey.status != 'Active'">禁用</b>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" ng-if="userDetail.ciAppList != null && userDetail.ciAppList.length !=0">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">持续集成应用</label>
                                <div class="col-md-9" style="box-shadow: 0 0 5px #ddd;padding: 10px">
                                    <div class="col-md-12" ng-repeat="ciApp in userDetail.ciAppList">
                                        <embed ng-if="ciApp.appType == 0" class="pull-left" style="margin-top:2px;"
                                               src="img/simpleicons/java.svg" width="15" height="15"
                                               type="image/svg+xml"
                                               pluginspage="img/simpleicons/"></embed>
                                        <embed ng-if="ciApp.appType == 1" class="pull-left" style="margin-top:2px;"
                                               src="img/simpleicons/python.svg" width="15" height="15"
                                               type="image/svg+xml"
                                               pluginspage="img/simpleicons/"></embed>
                                        <embed ng-if="ciApp.appType == 2" class="pull-left" style="margin-top:2px;"
                                               src="img/simpleicons/apple.svg" width="15" height="15"
                                               type="image/svg+xml"
                                               pluginspage="img/simpleicons/"></embed>
                                        <embed ng-if="ciApp.appType == 3" class="pull-left" style="margin-top:2px;"
                                               src="img/simpleicons/android.svg" width="15" height="15"
                                               type="image/svg+xml"
                                               pluginspage="img/simpleicons/"></embed>
                                        <embed ng-if="ciApp.appType == 4" class="pull-left" style="margin-top:4px;"
                                               src="img/simpleicons/test.svg" width="15" height="15"
                                               type="image/svg+xml"
                                               pluginspage="img/simpleicons/"></embed>
                                        <b class="pull-left" style="color: #286090;margin-left:5px;">{{ciApp.appName}}</b>
                                        <b class="pull-right">{{ciApp.content}}</b>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">SSH账户</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" ng-model="userDetail.username" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">SSHKey标题</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" ng-model="userDetail.sshKey.title" readonly>
                                </div>

                                <button ng-click="editSshKey()" ng-show="!editingSshKey"
                                        class="btn btn-xs"
                                        style="margin-top:5px; background-color: #2e6da4; color: white;">
                                    <span class="glyphicon glyphicon-edit"></span>编辑
                                </button>
                                <button ng-click="saveUserInfo()" ng-show="editingSshKey"
                                        class="btn btn-xs"
                                        style="margin-top:5px; background-color: #20a03f; color: white;">
                                    <span class="fa fa-key"></span>保存
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8">
                                <label class="col-md-3 control-label">SSHKey公钥</label>
                                <div class="col-md-9" ng-show="!editingSshKey">
                                    <div hljs hljs-source="userDetail.sshKey.key"></div>
                                </div>

                                <div class="col-md-9" ng-show="editingSshKey">
                                    <textarea class="form-control" ng-model="userDetail.sshKey.key" rows="6"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <span class="label" ng-show="userDetail.setKeyByGitlab"
                                      style="background-color: #20a03f; color: white;"
                                      uib-popover-html="'公钥已推送至Gitlab账户'" popover-trigger="'mouseenter'">
                                    <i class="fa fa-key">Gitlab</i>
                                </span>
                                <span class="label" ng-show="!userDetail.setKeyByGitlab"
                                      style="background-color: #777; color: white;"
                                      uib-popover-html="'公钥未推送至Gitlab账户'" popover-trigger="'mouseenter'">
                                    <i class="fa fa-key">Gitlab</i>
                                </span>

                                <br>
                                <span class="label" ng-show="userDetail.setKeyByJms"
                                      style="background-color: #20a03f; color: white;"
                                      uib-popover-html="'公钥已推送至JMS账户'" popover-trigger="'mouseenter'">
                                    <i class="fa fa-key">JMS</i>
                                </span>
                                <span class="label" ng-show="!userDetail.setKeyByJms"
                                      style="background-color: #777; color: white;"
                                      uib-popover-html="'公钥未推送至JMS账户'" popover-trigger="'mouseenter'">
                                    <i class="fa fa-key">JMS</i>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- / main -->
</div>


<script type="text/ng-template" id="editUserInfo">
    <div ng-include="'tpl/modal/user/edit_user_info_modal.html'"></div>
</script>